<?php 

$device  = $_GET['device'];
$version = $_GET['version'];
$city    = $_GET['city'];

 ?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>意见反馈</title>
	<link rel="stylesheet" href="css/reset.css">
	<script type="text/javascript" src="js/rem.js"></script>
	<script type="text/javascript" src="js/jquery.1.12.js"></script>
</head>
<body>
	<div class="wrapper">
		<section>
			<form action="../feedback.php" method="POST" id='form' enctype="multipart/form-data">
				<h1 style="font-size: 0.5rem;margin-top: 0;color: #333333"><span style="color: red;font-size: 0.5rem">*</span>问题描述:</h1>
				<textarea name="describe" class="desc" style="margin: 0.2rem;background-color: #FFFFFF; "></textarea>
				<div class="file flex-box">
					<img src="img/1_07.png" alt="" id='file'>
					<input type="file" name="img" id="upfile" style="display:none">
					<span style="color: #333333">点击上传您的异常现象照片</span>
				</div>
					<h1 style="font-size: 0.5rem;margin: 0.3rem;margin-left: 0;color: #333333"><span style="color: red;font-size: 0.5rem">*</span>联系方式:</h1>
					<input class="phones" name="tel" type="text" placeholder="请填写您的手机号" />
					<input class="qqs" name="qq" type="text" placeholder="请填写您的QQ号">
					<input type="hidden" name="device" value="<?php echo $device ?>">
					<input type="hidden" name="version" value="<?php echo $version ?>">
					<input type="hidden" name="city" value="<?php echo $city ?>">
				<ul class="info">
					<li style="font-size: 0.5rem;color: #333333;	">设备信息:</li>
					<li>设备型号:<?php echo $device ?></li>
					<li>应用版本号:<?php echo $version ?></li>
					<li>城市/网络:<?php echo $city ?></li>
				</ul>
				<div ><input type="submit" class="btn" value="提交反馈"></div>
			</form>
		</section>
	</div>
</body>
</html>

<script>
	$('#file').on('click', function() {
		$("#upfile").click();
	});

	$(".btn").click(function() {
		var res = checkContactManner();
		if (!res) {
			return false;
		}else{
			return true;
		}
	})

	function checkContactManner() {
		var tel = $(".phones").val();
		var qq = $(".qqs").val();
		var desc = $(".desc").val();
		if (desc == '') {
			alert('请对问题进行详细的描述');
			return false;
		}
		if (tel == '' && qq == '') {
			alert('电话或者QQ联系方式必填一个，方便我们联系您');
			return false;
		}else if (tel != '') {
			var pattern = /^1[34578]\d{9}$/; 
 			var res = pattern.test(tel);
 			if (!res) {
 				alert('请输入正确的手机号码');
 				return false;
 			} 
		}
		return true;
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
		font-size: 0.3rem;
		background-color: #EEEEEE; 
	}
	html,body,.wrapper{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.flex1{
		flex: 1;
	}
	.flex-box{
		display: flex;
	}
	.flex-col{
		flex-direction: column;
	}
	.center{
		text-align: center;
	}
	header{
		width: 100%;
		height: 1.2rem;
		background: #6a6a6a;
		color: #fff;
		font-size: 0.48rem;
	}
	header img{
		display: block;
		width: 0.5rem;
		height: 0.5rem;
		margin: 0.3rem 0.3rem 0 0.3rem;
	}
	header span{
		display: block;
		margin-top: 0.16rem;
	}
	section{
		flex: 1;
	}
	/*section h1{
		font-size: 0.4rem;
		margin: 0.5rem 0 0.2rem 0.34rem;
	}*/
	section textarea{
		width: 94%;
		height: auto;
		min-height: 3rem;
		border: none;
		outline: none;
		border: 1px solid #ccc;
		display: block;
		margin: 0 auto;
	}
	section .file{
		width: 92%;
		height: auto;
		min-height: 1.6rem;
		margin: 0 auto;
		margin-top: 0.4rem;
	}
	section .file img{
		display: block;
		width: 1.6rem;
		height: 1.6rem;
	}
	section .file span{
		font-size: 0.4rem;
		margin-top: 0.5rem;
		margin-left: 0.46rem;
	}
	section form{
		display: block;
		width: 92%;
		height: auto;
		min-height: 2rem;
		margin: 0.2rem auto 0 auto;
	}
	section form h1{
		font-size: 0.4rem;
		margin: 0;
	}
	input{
		display: block;
		width: 92%;
		height: auto;
		min-height: 1rem;
		font-size: 0.3rem;
		position: relative;
		padding-left: 0.7rem; 
	}
	.phone{
		width: 0.28rem;
		height: 0.44rem;
	}
	.qq{
		width: 0.5rem;
		height: 0.5rem;
	}
	.phones{
		background: #fff url("./img/1_11.png") no-repeat 0.26rem center;
		background-size: 0.28rem 0.44rem;
		margin-top: 0.28rem;
	}
	.qqs{
		background: #fff url("./img/1_15.png") no-repeat 0.26rem center;
		background-size: 0.28rem 0.44rem;
	}
	section ul{
		width: 92%;
		height: auto;
		min-height: 2rem;
		margin: 1rem auto 0 auto;
	}
	section ul li{
		font-size: 0.4rem;
		line-height: 0.64rem;
		color: #7a668f;
	}
	section ul li:first-child{
		/*font-weight: bold;*/
		/*color: #000;*/
	}
	.btn{
		width: 60%;
		height: auto;
		min-height: 0.8rem;
		background: #2885ff;
		color: #fff;
		text-align: center;
		line-height: 0.8rem;
		font-size: 0.5rem;
		margin: 0.64rem auto 0 auto;
	}
</style>